<template>
  <div class="body">
    <h1>欢迎来到书香阁后台管理系统</h1>
    <div class="top">
      <div class="left center">
        <div class="image">
          <img src="../assets/images/concern.png" alt="">
        </div>
        <div>
          100000人关注
        </div>
      </div>
      <div class="right center">
        <div class="image">
          <img src="../assets/images/money.png" alt="">
        </div>
        <div>
          总成交金额100000元
        </div>
      </div>
    </div>
    <div class="bottom">
      <div id="left"></div>
      <div id="right"></div>
    </div>

  </div>
</template>

<script>
import { Chart } from '@antv/g2';
import Images from "./sxg/images/index.vue";

export default {
  name: "Index",
  components: { Images },
  data() {
    return {
      data: [
        { genre: 'Sports', sold: 275 },
        { genre: 'Strategy', sold: 115 },
        { genre: 'Action', sold: 120 },
        { genre: 'Shooter', sold: 350 },
        { genre: 'Other', sold: 150 },
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const data = [
        { 年: '1951 年', sales: 38 },
        { 年: '1952 年', sales: 52 },
        { 年: '1956 年', sales: 61 },
        { 年: '1957 年', sales: 145 },
        { 年: '1958 年', sales: 48 },
        { 年: '1959 年', sales: 38 },
        { 年: '1960 年', sales: 38 },
        { 年: '1962 年', sales: 38 },
      ];

      const chart = new Chart({
        container: 'left',
        autoFit: true,
        height: 500
      });

      chart.interval().data(data).encode('x', '年').encode('y', 'sales')
        .encode('color', '年')
        .style('minHeight', 50)
        .scale('color', {
          range: ['#e8c1a0', '#f47560', '#f1e15b', '#e8a838', '#61cdbb'],
        });

      chart.render();

      const chart2 = new Chart({
        container: 'right',
        width: 500,
        height: 500,
      });

      chart2.coordinate({ type: 'theta', innerRadius: 0.25, outerRadius: 0.8 });

      chart2
        .interval()
        .data([
          { id: 'c', value: 526 },
          { id: 'sass', value: 220 },
          { id: 'php', value: 325 },
          { id: 'elixir', value: 561 },
          { id: 'rust', value: 54 },
        ])
        .transform({ type: 'stackY' })
        .encode('y', 'value')
        .encode('color', 'id')
        .scale('color', {
          range: ['#e8c1a0', '#f47560', '#f1e15b', '#e8a838', '#61cdbb'],
        })
        .label({
          text: 'value',
          fontWeight: 'bold',
          offset: 14,
        })
        .label({
          text: 'id',
          position: 'spider',
          connectorDistance: 0,
          fontWeight: 'bold',
          textBaseline: 'bottom',
          textAlign: (d) => (['c', 'sass'].includes(d.id) ? 'end' : 'start'),
          dy: -4,
        })
        .style('radius', 4)
        .style('stroke', '#fff')
        .style('lineWidth', 2)
        .animate('enter', { type: 'waveIn', duration: 800 })
        .legend(false);

      chart2.render();


    }
  }
};
</script>

<style scoped lang="scss">
h1 {
  margin: 50px auto;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  font-family: "宋体";
}

.top {
  margin-top: 60px;
  display: flex;
  justify-content: space-evenly;
  height: 100px;
  color: black;
  font-size: 23px;
  text-align: center;
  line-height: 100px;

  .left {
    width: 25%;
    border-radius: 20px;
    background-color: #fff;
  }

  .center {
    display: flex;
    justify-content: center;
    place-items: center;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  }

  .right {
    width: 25%;
    border-radius: 20px;
    background-color: #fff;
  }
}

.bottom {
  margin-top: 60px;
  display: flex;
  justify-content: space-evenly;
}

.image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  place-items: center;
  margin-right: 10px;
}

.left .image {
  background: #ffba00;
}

.right .image {
  background: #f47560;
}

img {
  width: 30px;
  transform: translateY(-50%);
}
</style>

